<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .qog_div {
            width: 1000px;
            height: 600px;
            display: flex;
            background-color: white;
            border-radius: 10px;
            margin: 100px auto;
            box-shadow: white 0px 0px 10px 5px;
        }

        .og_div {
            width: 60%;
            height: 100%;
            flex-grow: 1;
            border-radius: 10px 0px 0px 10px;
        }


        .sol_div {
            width: 50%;
            height: 100%;
            flex-grow: 1;

            border-radius: 0px 10px 10px 0px;
            background-image: url("img_1.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
.img{
    width: 100%;
    height: 100%;
}
input{
    border: 1px gray solid;
    outline: none;
}

    </style>
</head>
<body style="background-color: #999999">
<form action="insert.php" method="post">
    <div class="qog_div">

        <div class="og_div" style="text-align: center">
            <h2 style="color: #4070a0;text-align: center">用户注册页面</h2>
            <hr style="background-color: green;width: 30%;text-align: center;height: 10px">
            <div style="margin: auto;width: 70%">
<table style="width: 450px;height: 400px;text-align: center">
    <tr>
        <td><label>用户名：</label></td>
        <td><input type="text" name="username" style="height: 30px;border-radius: 4px;"></td>
    </tr>

    <tr>
        <td><label>密码：</label></td>
        <td><input type="password" name="pwd1" style="height: 30px;border-radius: 4px;"></td>
    </tr>


    <tr>
        <td><label>确认密码：</label></td>
        <td><input type="password" name="pwd2" style="height: 30px;border-radius: 4px;"></td>
    </tr>

    <tr >
        <td><label>性别：</label></td>
        <td><input type="radio" value="1" name="sex" >男
            &nbsp;&nbsp;
        <input type="radio" value="2" name="sex" >女</td>
    </tr>

    <tr>
        <td><label>手机号：</label></td>
        <td><input type="number" name="tel" style="height: 30px;border-radius: 4px;"></td>
    </tr>


    <tr>
        <td><label>兴趣爱好：</label></td>
        <td>
            <input type="checkbox" name="hobby[]" value="1" >读书
            <input type="checkbox" name="hobby[]" value="2" >旅游
            <input type="checkbox" name="hobby[]" value="3" >游泳<br>
            <input type="checkbox" name="hobby[]" value="4" >打游戏
            <input type="checkbox" name="hobby[]" value="5" >编程
            <input type="checkbox" name="hobby[]" value="6" >聊天
        </td>
    </tr>

    <tr>
        <td><label>家乡：</label></td>
        <td>
            <select style="width: 180px;height: 25px" name="hometown">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">天津</option>
                <option value="4">新疆</option>
                <option value="5">江苏</option>
                <option value="6">北京</option>
                <option value="7">广州</option>
                <option value="8">四川</option>
                <option value="9">山东</option>
                <option value="10">深圳</option>
            </select>

        </td>
    </tr>


    <tr style="height: 100px">
        <td><label style="text-align: left">个人介绍：</label></td>
        <td> <textarea  name="grjs" rows="10" cols="30" placeholder="请简单的介绍一下你自己" style="border-radius: 4px;outline: none;border: 1px gray solid"></textarea></td>
    </tr>
    <tr>
        <td></td>
        <td><div style="margin: auto;"><input type="submit" value="提交信息"></div></td>
        <td></td>
    </tr>


</table>
        </div>
        </div>
        <div class="sol_div"></div>
    </div>

</form>
</body>
</html>
